<template>
  <div id="app">
    <Row>
      <Col :span="24">
        <ivw-upload
          action="/upload"
          type="drag"
          :max-size="1024*10"
          accept=".xls, .xlsx, .ppt, .pptx, .doc, .docx, .pdf, .csv"
          :format="['xls', 'xlsx', 'ppt', 'pptx', 'doc', 'docx', 'pdf', 'csv']"
          :on-success="pagination">
          <div style="padding: 20px 0">
            <Icon class="ivw-light-blue" type="md-grid" size="52"></Icon>
            <p>点击选择或拖拽文件到此处！</p>
          </div>
        </ivw-upload>
      </Col>
    </Row>
    <Row>
      <Col :span="6">
        <Form>
          <FormItem label="用户" :labelWidth="80">
            <Select v-model="select.selected">
              <Option v-for="item in select.data" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <Row>
      <Table ref="ivw-table" border
             :columns="table.columns" :data="table.data"/>
    </Row>

    <div ref="ivw-hide"></div>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'App',
  components: {
    'ivw-upload': () => import('@/components/ivw-upload')
  },
  data() {
    return {
      select: {
        data: [
          {
            value: '1、Adreona',
            label: '1、Adreona'
          },
          {
            value: '2、Bryasia',
            label: '2、Bryasia'
          },
          {
            value: '3、Charidy',
            label: '3、Charidy'
          },
          {
            value: '4、Dalon',
            label: '4、Dalon'
          },
          {
            value: '5、Emilija',
            label: '5、Emilija'
          },
          {
            value: '6、Felise',
            label: '6、Felise'
          },
          {
            value: '7、Janemarie',
            label: '7、Janemarie'
          },
          {
            value: '8、Octivia',
            label: '8、Octivia'
          },
          {
            value: '9、Eder',
            label: '9、Eder'
          },
          {
            value: '10、Geralynn',
            label: '10、Geralynn'
          },
          {
            value: '11、Hulene',
            label: '11、Hulene'
          },
          {
            value: '12、Hamid',
            label: '12、Hamid'
          },
          {
            value: '13、Holbert',
            label: '13、Holbert'
          },
          {
            value: '14、Rope',
            label: '14、Rope'
          },
          {
            value: '15、Quamisha',
            label: '15、Quamisha'
          },
          {
            value: '16、Quaylen',
            label: '16、Quaylen'
          },
          {
            value: '17、Oumou',
            label: '17、Oumou'
          },
          {
            value: '18、Owens',
            label: '18、Owens'
          },
          {
            value: '19、Pippa',
            label: '19、Pippa'
          },
          {
            value: '20、Pajtim',
            label: '20、Pajtim'
          },
          {
            value: '21、Patrickjames',
            label: '21、Patrickjames'
          },
          {
            value: '22、Yasmen',
            label: '22、Yasmen'
          },
          {
            value: '23、Yusrah',
            label: '23、Yusrah'
          },
          {
            value: '24、Yoali',
            label: '24、Yoali'
          },
          {
            value: '25、Yasmene',
            label: '25、Yasmene'
          },
          {
            value: '26、Zacariah',
            label: '26、Zacariah'
          },
          {
            value: '27、Zoribel',
            label: '27、Zoribel'
          },
          {
            value: '28、Zoribel',
            label: '28、Zoribel'
          },
          {
            value: '29、Zanye',
            label: '29、Zanye'
          },
          {
            value: '30、Zareah',
            label: '30、Zareah'
          }
        ],
        selected: '1、Adreona'
      },
      table: {
        columns: [
          {
            type: 'index',
            title: '序号',
            align: 'center',
            width: 65
          },
          {
            key: 'attach_show_name',
            title: '文件名',
            align: 'left'
          },
          {
            title: '操作',
            align: 'center',
            width: 550,
            render: (h, { column, row, index }) => {
              let edit = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-light-blue',
                on: {
                  click: () => this.edit(row)
                }
              }, [h('Icon', { props: { type: 'ios-list-box-outline' } }), h('span', '编辑')]);

              let forceSave = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.forceSave(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'forceSave')]);
              let drop = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.drop(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'drop')]);

              let info = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.info(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'info')]);

              let license = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.license(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'license')]);

              let meta = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.meta(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'meta')]);

              let version = h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                class: 'ivw-orange',
                on: {
                  click: () => this.version(row)
                }
              }, [h('Icon', { props: { type: 'ios-warning-outline' } }), h('span', 'version')]);

              return h('Row', {
                props: {
                  justify: 'start'
                }
              }, [
                edit,
                forceSave,
                drop,
                info,
                license,
                meta,
                version
              ]);
            }
          }

        ],
        data: []
      }
    }
  },
  created() {
    this.pagination();

  },

  methods: {
    submit() {
    },
    edit(row) {
      let form = document.createElement('form');
      form.action = process.env.VUE_APP_BASE_API + '/api/edit';
      form.target = '_blank';
      form.method = 'POST';
      let input = document.createElement('input');
      input.name = 'id';
      input.value = row.id;
      form.append(input);
      input = document.createElement('input');
      input.name = 'user';
      input.value = this.select.selected;
      form.append(input);
      this.$refs['ivw-hide'].append(form);
      form.submit();
      form.remove();
    },
    review(row) {
    },
    forceSave(row) {
      this.$http.get('/force-save?id=' + row.id).then(res => {
        this.$Message.info(res.data.data);
        // if (res.data.error == 0) {
        //   alert('文档正在编辑，5秒后开始下载最新版！');
        //   setTimeout(function () {
        //     window.location.href = "/download?name=" + 'v1' + row.file_name;
        //     // var $eleForm = $("<form method='get'></form>");
        //     // $eleForm.attr("action",  "/download?name=" + row.file_name);
        //     // $(document.body).append($eleForm);
        //     // //提交表单，实现下载
        //     // $eleForm.submit();
        //   }, 5000);
        //   return;
        // } else {
        //   alert('文档未编辑，开始下载！');
        // }
        // window.location.href = "/download?name=" + row.file_name;
        // var $eleForm = $("<form method='get'></form>");
        // $eleForm.attr("action",  "/download?name=" + row.file_name);
        // $(document.body).append($eleForm);
        // //提交表单，实现下载
        // $eleForm.submit();
      })
    },
    drop(row) {
      console.log(encodeURIComponent(this.select.selected));
      this.$http.get('/drop?id=' + row.id + '&user=' + this.select.selected).then(res => {
        this.$Message.info(res.data.data);
      });
    },
    info(row) {
      this.$http.get('/info?id=' + row.id).then(res => {
        this.$Message.info(res.data.data);
      });
    },
    license(row) {
      this.$http.get('/license?id=' + row.id).then(res => {
        this.$Message.info(res.data.data);
      });
    },
    meta(row) {
      this.$http.get('/meta?id=' + row.id).then(res => {
        this.$Message.info(res.data.data);
      });
    },
    version(row) {
      this.$http.get('/version?id=' + row.id).then(res => {
        this.$Message.info(res.data.data);
      });
    },
    // 获取文件列表
    pagination() {
      this.$http.get('/pagination').then(res => {
        this.table.data = res.data.data;
      })
    }
  }
}
</script>

<style>

</style>
